<!--
 * @Description:充值提现界面 ---- 店铺
 * @version: v1.0
 * @Author: Wang Xi
 * @Date: 2023-6-01 10:10:00
 * @LastEditors: WangXi
 * @LastEditTime: 2023-06-16 16:12:32
-->
<template>
	<view class="recharge-container">
		<c-layout>
			<c-navigation-bar slot="head" :title="pageInfo.title" navbar-bg-color="transparent" title-color="#fff">
				<template slot="rightIcon">
					<view class="head-right-font" @click="clickRecords">
						<u-icon name="order" color="#fff" size="40"></u-icon>
					</view>
				</template>
			</c-navigation-bar>
			<view class="balance">
				<h2>{{$t('recharge.StoreBalance')}}：</h2>
				<view style=" color: rgba(27, 29, 41, 1);
			font-family: PingFangSC-Heavy;
			margin-top: 16px;
			font-size: 30px;">${{publicJS.toFixed(balance.shop,2)}}</view>
			</view>
			<view class="container">
				<!-- 充值方式文字 -->
				<view class="recharge-way">
					<p>{{pageInfo.title}}{{$t('recharge.way')}}</p>
				</view>
				<!-- 选择 充值/提现  方式 -->

				<view class="check-recharge-way">
					<view :class="`check-btn ${activeRechargeWay === item.key ? 'is-active':''}`"
						v-for="(item,index) in currentRechargeWayList" :key="index" @click="rechargeWayChange(item.key)">
						{{item.lab}}
					</view>
				</view>
				<view class="usdt-type">

				</view>
				<view class="selectBox">
					<u-input v-model="countryValue" type="select" :border="true" placeholder=''
						style="padding: 44rpx;font-size: 24rpx;" @click="countryShow=true" mode="single-column" />
					<text class="bankTitle">{{$t('addAddress.country')}}</text>
				</view>
				<view class="bankBox" @click="openPopupShow" v-if="activeRechargeWay==='0'">
					<view class="bankImg">
						<image v-if="currentRechargeInfo.bankNo" style="width: 100%;height: 100%;"
							src="@/static/images/bankCard-bg.png" mode=""></image>
					</view>
					<view class="bankInfo">
						<view class="bankCard">
							{{$t('card.bankNo')}}
						</view>
						<view class="bankCardId">
							{{currentRechargeInfo.bankNo}}
						</view>
					</view>
				</view>
				<view v-else>
					<titleInput :title="$t('recharge.walletAddress')" disabled=false :paddingLeft="'40rpx'"
						:value="currentRechargeInfo.bankNo" style="margin-bottom: 40rpx;"></titleInput>
				</view>
				<!-- 选择通道 -->
				<view class="passageBox">
					<view v-if="passage" v-for="(item,index) in passageList" :key="index"
						:class="['passageItem',isActive1==index?'isActive1':'']" @click="paychannel(index)">
						{{item.channelName}}
					</view>
				</view>
				<view class="recharge-handle-area">
					<titleInput :paddingLeft="'40rpx'" v-model="baseInfo.amount" focusColor="#2934D0"
						:title="`${pageInfo.title}${$t('recharge.amount')}`" type='number'>
						<view class="leftIcon" slot="right-icon" style="padding-right: 30rpx;">
							$
						</view>
					</titleInput>
					<view v-if="countryValue" style="text-indent: 20rpx;">
						≈{{exchangeRate}}RMB
					</view>
				</view>
				<!-- 提现的提示语句 -->
				<view v-if="pageInfo.type" class="description-box">
					<p class="title">{{$t('recharge.Description')}}:</p>
					<view class="">
						<view class="">
						<u-parse :html="WithdrawalInstructions"></u-parse>
						</view>
						<view class="">
							{{$t('recharge.Minimum_withdrawal')}} {{minNumber}}
						</view>

					</view>
				</view>
				<!-- <view v-else class="rechargelist">
					<view class="rechargelist-box" v-for='(item,index) in rechargelist' :key='index'
						@click="baseInfo.amount=item">
						<view class="">
							${{item}}
						</view>
					</view>

				</view> -->
				<view class="rechargelist" v-if="pageInfo.type==0">
					<view :class="['rechargelist-box',isActive==index?'isActive':''] " v-for='(item,index) in rechargelist'
						:key='index' @click="baseInfo.amount=item,isActive=index">
						<view class="">
							${{item}}
						</view>
					</view>
					<view class="instructionsBox" v-if="pageInfo.type==0">
						<view class="instructions">
							{{$t('recharge.Description')}}:
						</view>
						<view class="instructionsContent">
							<rich-text :nodes="instructionsContent"></rich-text>
						</view>
					</view>
				</view>
			</view>
			<u-button slot="footer" type="default" class="submit-btn blue"
				@click="submitClick">{{$t('system.Submit')}}</u-button>
		</c-layout>
		<!-- 选择银行卡弹出层 -->
		<u-popup v-model="popupShow" :mask-close-able='false' height="50.5%" class="exchange-rate-popup" :round="100"
			mode="bottom">
			<view class="popup-main">
				<p class="title">{{$t('recharge.bankCardTips')}}</p>
				<scroll-view :scroll-y="true">
					<u-radio-group iconPlacement="right" v-model="exchangeRateValue" placement="column">
						<u-radio v-for="(item,index) in bankList.list" :key="index" :label="item.id" :name="item.id"
							@change="exchangeRateChange">
							<view class="radio-item">
								<text class="name">
									({{item.bankName}})
								</text>
								<text class="symbol">
									{{item.bankNo}}
								</text>
							</view>
						</u-radio>
					</u-radio-group>
				</scroll-view>
				<button class="submit-btn blue" @click="popClose" type="default">{{$t('recharge.finished')}}</button>
			</view>
		</u-popup>

		<!-- 选择通道 -->
		<u-popup v-model="channelShow" height="50.5%" border-radius="32" class="exchange-rate-popup" :round="100"
			mode="bottom">
			<view class="popup-main">
				<p class="title">{{$t('recharge.channelTips')}}</p>
				<scroll-view :scroll-y="true">
					<u-radio-group iconPlacement="right" v-model="channelValue" placement="column">
						<u-radio v-for="(item,index) in channelList" :key="index" :label="item.id" :name="item.id"
							@change="channelChange">
							<view class="radio-item">
								<text class="name">
									({{item.name}})
								</text>

							</view>
						</u-radio>
					</u-radio-group>
				</scroll-view>
				<button class="submit-btn blue" @click="channelShow=false" type="default">{{$t('recharge.finished')}}</button>
			</view>
		</u-popup>

		<promptDialog ref="promptDialog"></promptDialog>
		<inputPayPassword @finish="payPwdPopFinish" :amount="currentRechargeInfo.amount" :payPwdPopShow.sync="payPwdPopShow"
			:maxlength="6">
		</inputPayPassword>
		<u-select :confirm-text="$t('system.affirm')" :cancel-text="$t('system.cancel')" :list="countryList"
			v-model="countryShow" @confirm="actionSheetCallback"></u-select>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				WithdrawalInstructions: "", //体现说明
				instructionsContent: "", //充值说明
				usdtInfo: {},
				//选择国家
				countryValue: '',
				countryShow: false,
				countryexchangeRate: '', //汇率
				countryList: [], //国家列表
				payChannel: '', //支付通道
				isActive: 0, //金额选择是否选中
				isActive1: 0, //通道是否选中
				bank: '',
				//支付通道
				passage: false,
				passageList: [],
				// 基础信息
				baseInfo: {
					amount: '', // 金额
					email: 'unready@163.com', // 邮箱
					description: '' // 描述
				},
				minNumber: 0,
				channelId: '',
				channelName: '',
				channelValue: '',
				channelShow: false,
				// 页面信息，充值和页面相对信息
				pageInfo: {
					title: '',
					type: 0, // 0-充值 1-提现
					rechargeType: 0, // 0-用户 1-店铺
				},
				// usdt-信息
				usdtData: {
					'ERC-20': null,
					'TRC-20': null,
				},
				balance: {
					user: 0,
					shop: 0,
				}, // 店铺信息
				/**
				 *银行卡列表 
				 *get {Boolean} 是否获取过
				 *list 列表数据 
				 */
				bankList: {
					get: false,
					list: []
				}, // 银行卡列表
				channelList: [{
						name: this.$t('recharge.artificial'),
						id: 1
					},
					{
						name: this.$t('recharge.onLine'),
						id: 2
					},
				], // 通道
				// 充值方式下的两个按钮选择
				rechargeWayList: [{
					lab: this.$t('recharge.bankCard'),
					key: '0'
				}, {
					lab: 'USDT',
					key: '1'
				}, ],
				storeRechargeWayList: [{
					lab: this.$t('recharge.bankCard'),
					key: '0'
				}, {
					lab: 'USDT',
					key: '1'
				}, ],
				// usdt下的两种代币标准
				radioList: [{
					lab: 'ERC-20',
					val: 'ERC-20'
				}, {
					lab: 'TRC-20',
					val: 'TRC-20'
				}],
				rechargelist: [
					50, 100, 200, 500,
					1000, 2000, 3000, 5000
				],
				/**
				 * 当前选中的充值 / 提现方式  0 -银行卡 1- usdt
				 */
				activeRechargeWay: '0',
				usdtType: 'TRC-20',
				popupShow: false, // 选择银行卡弹出框状态 
				payPwdPopShow: false, // 密码校验组件是否显示
				// 汇率列表
				exchangeRateList: [],
				exchangeRateValue: '',
				// 提现的提示语
				withdrawTips: '24 hours online recharge Withdrawal arrives within 48 hours at the latest Minimum withdrawal 50S',
				// 提现信息
				withdrawData: {
					"amount": 0,
					"country": "",
					"exchangeRate": 1,
					"id": ""
				},
				rechargelist: [
					50, 100, 200, 500,
					1000, 2000, 3000, 5000
				],
				activeRechargeWay1: 0
			};
		},
		async onShow() {
			this.activeRechargeWay == '1' && this.geBankCardInfoAjax()
		},
		async onLoad(option) {
			
			const sysInfo = uni.getSystemInfoSync();
			const language = sysInfo.language;
			console.log(language);
			this.$u.get('/app/channel/getCountry').then(res => {
				console.log(res.data)
				
				res.data.forEach(item => {
				item.label = uni.getLocale()=="en"?item.englishName:item.chineseName
					item.value = item.id
				})
				this.countryList = res.data
			})
			// 查询银行卡信息
			this.geBankCardInfoAjax()
			console.log(option.type)
			if (option.type == 0) {
				this.baseInfo.amount = this.rechargelist[0]
				this.$u.get('/app/language/text/info/f2f50c092f7b45559874bf9cf2015f52').then(res => {
					this.instructionsContent = res.data
				})
			} else if (option.type == 1) {
				this.$u.get('/app/language/text/info/2c81bddebe574b38a5b1682b0f78b747').then(res => {
					this.WithdrawalInstructions = res.data
				})
			}
			// this.payChannel=this.passage[0]
			const type = ~~option.type
			const rechargeType = ~~option.rechargeType
			const str1 = type ? this.$t('recharge.withdrawal') : this.$t('recharge.recharge')
			const str2 = rechargeType ? this.$t('product.store') : ''
			this.pageInfo = {
				title: str2 + str1,
				type,
				rechargeType,
			}
			// 当类型为提现时   校验是否设置店铺密码  ---- 7-7 , 14:00 取消校验是否设置店铺密码 -- 等后台提示  ，， 并且密码的数据设计可能不统一所以不用此接口。。
			// if (this.pageInfo.type == '1') {
			// 	const status = await this.$u.api.verifyIsSetPwdAjax(0)
			// 	if (!status) {
			// 		this.$refs.promptDialog.show({
			// 			confirm: (close) => {
			// 				uni.navigateTo({
			// 					url: "/pages/modify/modify?type=2&set=0"
			// 				})
			// 				close()
			// 			},
			// 			close: () => {
			// 				this.publicJS.backOption()
			// 			},
			// 			title: '提示',
			// 			des: '请先设置店铺提现密码',
			// 			btnText: '点击跳转'
			// 		})
			// 		return
			// 	}
			// }
			this.$u.post('/app/h2-sys-config/listConfigByGroup/' + '5').then(res => {
				this.withdrawTips = res.data[1].richText
			})
			this.$u.post('/app/h2-sys-config/getConfigKey/' + '4dbcb4f49f3915e98d67344b015013f8').then(res => {
				this.minNumber = Number(res.data)
			})
			this.getShopBalanceAjax()
		},
		computed: {
			// 当前汇率信息
			currentExchangeRate() {
				const find = this.exchangeRateList.find(f => f.currencyName === this.exchangeRateValue)
				return find || {}
			},
			// 汇率计算
			exchangeRateComputed() {
				const num = this.baseInfo.amount / this.currentExchangeRate.exchangeRate
				return num ? num.toFixed(2) : this.baseInfo.amount.toFixed(2)
			},
			exchangeRate() {
				if (this.countryexchangeRate) {
					if (this.countryexchangeRate[0].exchangeRate) {
						console.log(this.countryexchangeRate[0].exchangeRate, this.baseInfo.amount)
						const exchangeRate = this.countryexchangeRate[0].exchangeRate * this.baseInfo.amount
						return exchangeRate
					} else {
						const exchangeRate = 1 * this.baseInfo.amount
						return exchangeRate
					}

				}
			},
			// 当前银行卡
			currentBankInfo() {
				return this.activeRechargeWay === '0' ? (this.bankList.list.find(f => f.id === this.exchangeRateValue) || {}) :
					{}
				// return this.activeRechargeWay === '0' ? (this.bankList || {}) : {}
			},
			// 根据当前选中银行卡 以及 选择的 充值/提现 方式 计算出真正需要的数据 ---提取部分逻辑
			currentRechargeInfo() {
				const bank = this.activeRechargeWay === '0' ? this.currentBankInfo : this.usdtData[this.usdtType]
				console.log('==========bank', bank)
				const data = {
					// 充值信息
					rechargeName: this.vuex_user_info.nickName,
					usdtType: this.usdtType,
					...bank,
					bankType: this.activeRechargeWay,
					channelId: this.payChannel,
					channelName: this.channelName,
					"exchangeRate": 1,
					...this.baseInfo,
				}
				console.log(data, 'computed bank');
				return data
			},
			currentRechargeWayList() {
				return [this.rechargeWayList, this.storeRechargeWayList][this.pageInfo.rechargeType]
			},
		},
		methods: {
			//选择国家
			actionSheetCallback(e) {
				console.log(e[0].value)
				this.isActive1 = 0
				this.countryValue = e[0].label
			this.countryexchangeRate =uni.getLocale()=="en"?this.countryList.filter(item => item.englishName == e[0].label): this.countryList.filter(item => item.chineseName == e[0].label)
				this.$u.get(`/app/channel/list/${e[0].value}`).then(res => {
					console.log(res.data[0])
					if (res.data[0]) {
						this.passage = true
						this.channelName = res.data[0].channelName
						this.payChannel = res.data[0].id
						this.passageList = res.data
					} else {
						this.passage = false
						this.passageList = []
					}
				})
			},
			//点击右上角图标
			clickRecords() {
				if (this.pageInfo.type == 0) {
					console.log('这是店铺充值充值记录')
					uni.navigateTo({
						url: `/pages/recharge/records?type=3`
					})
				} else {
					console.log('这是店铺提现记录')
					uni.navigateTo({
						url: `/pages/recharge/records?type=4`
					})
				}
			},
			//选择支付通道
			paychannel(index) {
				this.isActive1 = index
				this.channelName = this.passageList[index].channelName
				this.payChannel = this.passageList[index].id
			},
			// 获取店铺余额
			getShopBalanceAjax() {
				this.$u.get('/app/shop/balance').then(res => {
					this.balance.shop = ~~res.data.totalBalance
				})
			},
			// 充值操作
			rechargeHandelAjax() {
				if ((this.activeRechargeWay == '2' && this.pageInfo.rechargeType) && (~~this.currentRechargeInfo.amount >
						~~this.vuex_user_info.balance)) {
					this.$u.toast(this.$t('recharge.cantgreater'))
					return
				}
				const data = this.currentRechargeInfo
				console.log(data, '跳转');
				this.$u.vuex('vuex_recharge_data', data)
				uni.navigateTo({
					url: `/pages/rechargeAffirm/rechargeAffirm?type1=${this.activeRechargeWay}&type=` + this
						.pageInfo.rechargeType,
					"animationType": "slide-in-right",
					"animationDuration": 300
				})
			},
			// 充值信息修改
			rechargeWayChange(key) {
				if (this.activeRechargeWay === key) {
					return
				}
				this.activeRechargeWay = key
				if (this.activeRechargeWay == 1) {
					this.geBankCardInfoAjax(null, true)
				}
			},
			// 提交的判断
			submitClick() {
				if (!this.currentRechargeInfo.id) {
					if (this.activeRechargeWay == '1') {
						this.showTips()
					} else {
						this.$u.toast(this.$t('recharge.selectBank'))
					}
					return
				}
				if (!this.payChannel) {
					this.$u.toast(this.$t('recharge.channelTips'))
					return
				}
				// 未填写金额或者为0
				if (this.baseInfo.amount) {
					if (this.pageInfo.type) {
						this.withdrawalsPreprocessing()
					} else {
						this.rechargeHandelAjax()
					}
				} else {
					this.$u.toast(this.$t('recharge.pleaseFillInTheAmount'))
				}
			},
			// 打开银行卡列表弹出层
			openPopupShow() {
				this.geBankCardInfoAjax(() => {
					this.popupShow = true
				}, 1)
			},
			// 关闭银行卡列表弹出层
			popClose() {
				this.popupShow = false
			},
			/**
			 * 获取银行卡/usdt信息方法 
			 * @param {Function} cb = [请求完成回调] 
			 * @param {Boolean} isTip = [是否触发提示] 
			 */
			geBankCardInfoAjax(cb, isTip) {
				const type = this.activeRechargeWay
				// 当前为usdt有类型时 传递参数
				const url = '/app/user/bank/bank/' + type + `${type ==='1' ? `/${this.usdtType}`:''}`
				if (type === '0') {
					if (this.bankList.get && this.bankList.list.length) {
						// 已经获取过银行卡列表并且有数据懒得刷新了
						typeof cb === 'function' && cb()
						return
					}
				}
				this.$u.get(url).then(res => {
					if (type === '0') {
						if (res.data.length) {
							this.bankList.get = true
							this.bankList.list = res.data
						} else {
							isTip && this.showTips()
							return
						}
					} else {
						if (res.data.length) {
							this.usdtData[this.usdtType] = res.data[0]
							console.log(this.usdtData[this.usdtType], 555555);
						} else {
							isTip && this.showTips()
						}
					}
					typeof cb === 'function' && cb()
				})
			},
			/**
			 * 展示没有绑定银行卡 、 usdt 的提示
			 */
			showTips() {
				let des = '' // 描述 
				let type = '' // 跳转类型
				if (this.activeRechargeWay == '0') {
					des = this.$t('recharge.addBank')
					type = '0'
				} else {
					des = this.$t('recharge.addUsdt')
					type = '1'
				}
				this.$refs.promptDialog.show({
					confirm: (close) => {
						uni.navigateTo({
							url: `/pages/cardList/cardList?type=${type}`
						})
						close(false)
					},
					title: this.$t('system.Hint'),
					des,
					btnText: this.$t('product.GoToAdd')
				})
			},
			//按钮选中
			exchangeRateChange(n) {
				console.log(n, 'check');
			},
			//通道选中
			channelChange(n) {
				console.log(n, this.channelValue);
				this.channelId = n
				this.channelList.forEach(i => {
					if (i.id == n) {
						this.channelName = i.name
					}
				})
			},
			// 用户提现接口
			withdrawalsAjax(password) {
				const data = {

					"amount": this.publicJS.toFixed(this.baseInfo.amount),
					"amountIncurred": this.baseInfo.amount,
					"exchangeRate": this.countryexchangeRate[0].exchangeRate ? this.countryexchangeRate[0]
						.exchangeRate : 1,
					"id": this.currentRechargeInfo.id,
					"cardId": this.currentRechargeInfo.id,
					channelId: this.payChannel,
					"payMethod": this.currentRechargeInfo.bankType,
					password
				}
				const url = this.pageInfo.rechargeType ? '/app/shop/rw/withdrawal' : '/app/user/withdrawals'
				this.$u.post(url, data).then(res => {
					this.$u.toast(res.msg)
					setTimeout(() => {
						this.isloading = false
						uni.navigateTo({
							url: 'pages/storyType/storeManagement'
						})
					}, 1000)

				}).catch(e => {
					this.isloading = false
				})
			},
			// 提现的前置处理 包含字段校验
			withdrawalsPreprocessing() {
				if (this.activeRechargeWay === '1' && this.usdtData[this.usdtType].id === undefined) {
					this.$u.toast(this.$t('recharge.bindusdt'))
					return
				} else if (!this.baseInfo.amount) {
					this.$u.toast(this.$t('recharge.pleaseFillInTheAmount'))
					return
				} else if (this.baseInfo.amount < this.minNumber) {
					this.$u.toast(this.$t('recharge.enterMore'))
					return
				}
				if (this.pageInfo.rechargeType) {
					if (this.baseInfo.amount > this.balance.shop) {
						this.$u.toast(this.$t('recharge.cantgreater'))
						return
					}
				} else {
					if (this.baseInfo.amount > this.balance.user) {
						this.$u.toast(this.$t('recharge.cantgreater'))
						return
					}
				}
				this.payPwdPopShow = true
			},
			// 输入密码完成执行
			async payPwdPopFinish(val, clear) {
				if (this.pageInfo.rechargeType) {
					await this.withdrawalsAjax(val)
				} else {
					await this.verifyPayPwdAjax(val, (password) => {
						this.withdrawalsAjax(password)
					})
				}
				this.payPwdPopShow = false
				clear()
			},
			// 验证密码
			async verifyPayPwdAjax(password, handle) {
				await this.$u.api.verifyPayPwdAjax(password, () => {
					handle(password)
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.recharge-container {
		background: linear-gradient(56.66deg, rgba(41, 52, 208, 1) -6.04%, rgba(41, 52, 208, 0) 119.79%);

		.balance {
			padding: 40rpx;
			margin: 40rpx;
			height: 244rpx;
			margin-top: 0;
			transform: translateY(40rpx);
			background: #FFF;
			border-radius: 16rpx;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0px 4px 4px rgba(41, 52, 208, 0.05);
			z-index: 999;
			position: relative;

			>h2 {
				font-size: 30rpx;
				font-weight: normal;
				padding-bottom: 10rpx;
			}

			>text {
				text-indent: 2em;
				font-size: 30rpx;
			}
		}

		.rechargelist {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.rechargelist-box {
				width: 96px;
				display: inline-block;
				margin: 10px 0;
				height: 75px;
				text-align: center;
				line-height: 75px;
				color: rgba(145, 144, 154, 1);
				font-family: Helvetica-Helvetica;
				font-size: 16px;
				mix-blend-mode: normal;
				border-radius: 12px;
				background: rgba(244, 244, 244, 1);
			}
		}


		.container {
			padding: 80rpx 40rpx;
			background: #fff;
			// height: 90vh;
			position: relative;
			top: -100rpx;
			min-height: 72vh;

			.recharge-way {
				padding-top: 30rpx;
				font-size: 36rpx;
			}


			// 充值方式
			.check-recharge-way {
				display: flex;
				margin-top: 50rpx;

				.check-btn {
					padding: 0 40rpx;
					height: 64rpx;
					text-align: center;
					line-height: 64rpx;
					color: rgba(182, 182, 182, 1);
					font-size: 28rpx;
					letter-spacing: 1rpx;
					border-radius: 4px;
					border: 1px solid rgba(182, 182, 182, 1);
					box-sizing: border-box;
					background: rgba(255, 255, 255, 1);

					&:not(:last-child) {
						margin-right: 80rpx;
					}

					&.is-active {
						color: rgba(41, 52, 208, 1);
						border: 1px solid rgba(41, 52, 208, 1);
						background: rgba(41, 52, 208, 0.05);
					}
				}

			}

			.usdt-type {
				margin-top: 50rpx;

				/deep/ .card-banner {
					overflow: visible;

					.uni-swiper-wrapper {
						overflow: visible;
					}

					.uni-swiper-dot:not(.uni-swiper-dot-active) {
						border: 4rpx solid #868686;
						box-sizing: border-box;
					}

					.uni-swiper-dots {
						transform: translate(-50%, 70rpx) !important;
						z-index: 100;
					}

					uni-swiper-item {
						padding: 0 10rpx;
						box-sizing: border-box;
					}

					.uni-swiper-slides {}

					.swiper-item {
						height: 100%;
						transform: scale(0.9);
						opacity: 0.8;
						transition: .2s;

						.bank-card-container {}

						&.is-current {
							opacity: 1;
							transform: scale(1);

							// box-shadow: 0rpx 20rpx 98rpx 0rpx #B8BFEF;
							.bank-card-container {
								// box-shadow: 0rpx 20rpx 98rpx 0rpx #B8BFEF;
							}
						}
					}
				}
			}

			// 充值操作区域
			.recharge-handle-area {
				margin: 50rpx 0;

				.check-currency {
					>view {
						height: 100rpx;
						display: flex;
						justify-content: space-between;
						background-color: #fff;
						border: 0rpx;
						line-height: 100rpx;
						font-size: 32rpx;

						>view {
							display: flex;
							align-items: center;

							image {
								margin-left: 10rpx;
							}
						}
					}
				}

				.title {
					font-size: 32rpx;
				}

				// 充值金额
				.input-box {
					margin-top: 20rpx;
					display: flex;
					padding-bottom: 20rpx;
					border-bottom: 2rpx solid #ccc;
					align-items: center;

					>image {
						height: 50rpx;
						width: 50rpx;
					}

					>input {
						margin-left: 10rpx;
						position: relative;
						overflow: visible;

						.uni-input-placeholder {
							padding-left: 10rpx;
						}
					}
				}

				.transition {
					margin-top: 20rpx;
					display: flex;
					align-items: center;
				}
			}

			.rechargelist {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				.rechargelist-box {
					// width: 96px;
					width: 23%;
					display: inline-block;
					margin: 10px 0;
					height: 35px;
					text-align: center;
					line-height: 35px;
					color: rgba(145, 144, 154, 1);
					font-family: Helvetica-Helvetica;
					font-size: 16px;
					mix-blend-mode: normal;
					border-radius: 12rpx;
					background: rgba(244, 244, 244, 1);
				}

				.rechargelist-box.isActive {
					background-color: #2935d0;
					color: #fff;
				}
			}

			// 提现提示
			.description-box {
				line-height: 50rpx;
				padding-top: 10rpx;

				.title {}

				/deep/ .tip {
					text-indent: 1em;
				}
			}
		}

		.exchange-rate-popup {

			// border-start-start-radius: 20rpx;
			// border-start-end-radius: 20rpx;
			.u-drawer-content {
				background-color: #1c2f9c;
				border-start-start-radius: 20rpx;
				border-start-end-radius: 20rpx;
			}
		}

		/deep/ .layout-footer {
			padding-bottom: 20rpx;
			background: #fff;
		}

		/deep/ .left-icon-block {
			background: #fff;
		}

		.submit-btn {
			width: calc(100% - 80rpx);
			height: 120rpx;
			background-color: #2935d0;
			color: #fff;
		}

		.popup-main {
			padding: 40rpx;
			height: 100%;
			// border-start-start-radius: 20rpx;
			// border-start-end-radius: 20rpx;

			>.title {
				color: rgba(30, 36, 50, 1);
				font-family: PingFangSC-Heavy;
				font-size: 16px;
				font-weight: 600;
			}

			>uni-scroll-view {
				height: calc(100% - 232rpx) !important;
			}

			.u-radio-group {
				width: 100%;

				.u-radio {
					width: 100% !important;
					margin-top: 56rpx;

					/deep/ .u-radio__icon-wrap--circle {
						border-radius: 100%;
						border: 1px solid #000;
					}
				}
			}

			.radio-item {

				.exchange-rate {
					padding-left: 20rpx;
				}
			}

			>.submit-exchange-rate {}
		}

	}

	.passageBox {
		display: flex;
		flex-wrap: wrap;

		// justify-content: space-between;
		.passageItem {
			padding: 20rpx;
			text-align: center;
			width: 25%;
			background-color: #f4f4f4;
			color: #91909a;
			margin: 20rpx 10rpx;
			border-radius: 10rpx;
		}

		.passageItem.isActive1 {
			background-color: #2935d0;
			color: #fff;
		}
	}

	.bankBox {
		width: 100%;
		height: 150rpx;
		border: 2rpx solid #868686;
		border-radius: 30rpx;
		display: flex;
		padding: 15rpx 15rpx;

		.bankImg {
			width: 180rpx;
			height: 100%;
			border-radius: 10rpx;
			background-color: gainsboro;
		}

		.bankInfo {
			margin-left: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
		}
	}

	.instructions {
		margin-top: 20rpx;
	}

	.instructionsContent {
		text-align: justify;
		margin-top: 20rpx;
		font-size: 20rpx;
		line-height: 30rpx;
	}

	.selectBox {
		position: relative;
		margin-top: 30rpx;

		.u-input {
			border-radius: 32rpx;
			border: 1px solid #E8E6EA;
			margin-bottom: 40rpx;
			height: 132rpx;
			display: flex;
			align-items: center;
			font-size: 24rpx;
		}

		.bankTitle {
			font-family: SFUIDisplay-Regular, SFUIDisplay;
			text-align: center;
			width: 84rpx;
			height: 34rpx;
			position: absolute;
			top: -16rpx;
			left: 16rpx;
			background-color: #fff;
			font-size: 24rpx;
			color: #999CAD;
			padding: 0 16rpx;
		}
	}
</style>